<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./src/index.scss">
    <link rel="stylesheet" href="./dist/enhance-ui/enhance-ui.min.css">
</head>

<body>
    <!-- 这个是头部 -->
    <div class="top-banner"></div>
    <div class="page-title">
        冬奥会正式开启
    </div>
    <div class="content">
        这是一次共享奥林匹克光荣与梦想的冰雪之约。来自世界各地的体育健儿齐聚五环旗下，努力拼搏，奋勇争先，赛场是对手，场下是朋友，生动诠释了“更快、更高、更强——更团结”的奥运精神。国际奥委会主席巴赫在北京冬奥会闭幕式上致辞时说：“这是一届真正无与伦比的冬奥会，我们欢迎中国成为冰雪运动之国。”
        这是一个振奋民族精神、展现大国风采的开放舞台。作为首个“双奥之城”，北京如约向世界奉献了一场“简约、安全、精彩”的冬奥会。站在“两个一百年”的历史交汇点上，冬奥梦激荡中国梦，中国人民以热情、阳光、开放、自信的形象迈上实现民族伟大复兴的新征程。这是一次共享奥林匹克光荣与梦想的冰雪之约。来自世界各地的体育健儿齐聚五环旗下，努力拼搏，奋勇争先，赛场是对手，场下是朋友，生动诠释了“更快、更高、更强——更团结”的奥运精神。
        国际奥委会主席巴赫在北京冬奥会闭幕式上致辞时说：“这是一届真正无与伦比的冬奥会，我们欢迎中国成为冰雪运动之国。
    </div>
    <!-- 点击查看更多 -->
    <div class="click-read"></div>

    <!-- 打开app -->
    <div class="enhance-box">
        <div class="enhance-button"></div>
        <span class="message">作者:隐姓埋名</span> <span class="message">上次更新:2月11日</span> <span
            class="message">获赞:1000</span>
    </div>
    <!-- video -->
    <div class="video-button">
    </div>
    <!--评论 -->
    <div class="comment">
        <ul>
            <li>评论（4） <span class="comment-button-arrow"></span></li>
            <li>我是一条鱼1：如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。</li>
            <li>我是一条鱼2：如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。</li>
            <li>我是一条鱼3：如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。</li>
        </ul>
    </div>
    <div class="comment-button"></div>
    <div class="swiper"></div>
    <div class="back-top"></div>
    <style>
   
    </style>
    <script>
        function changeFontSize() {
            var fontSize = ((document.documentElement.clientWidth > 750 ? 750 : document.documentElement.clientWidth) * 16) / 375
            fontSize = fontSize.toFixed(3) + 'px'
            return fontSize
        }
        document.documentElement.style.fontSize = changeFontSize()
        window.addEventListener('resize', () => {
            document.documentElement.style.fontSize = changeFontSize()
        })
    </script>
    <script src="./dist/enhance-ui/index.js"></script>
    <script>
        new EnhanceUi.Aside({
    element: document.querySelector('.back-top'),
    color: 'gray',
    position: 'right',
    model:'circle',
    callback: () => { 
        console.log('这是回到顶部的回调');
    }
})

new EnhanceUi.Topbanner({
    element: document.querySelector('.top-banner'),
    mode: 'dark',
    location: 'top',
    isFixed: true,
    callback: () => { 
        console.log('这是顶部导航回调');
    }
})

new EnhanceUi.TextMoreButton({
    element: document.querySelector('.click-read'),
    mode: 'light',
    color: 'red',
    text: '打开"App",查看更多有趣内容',
    type: 'article',
    callback: () => { 
        console.log('textmorebutton的回调');
    }
})

new EnhanceUi.EnhanceButton({
    element: document.querySelector('.enhance-button'),
    text: '网易新闻',
    src:'https://www.baidu.com/s?ie=UTF-8&wd=npm',
    type: '',
    callback: () => { 
        console.log('EnhancButton的回调');
    }
})
new EnhanceUi.VideoButton({
    element: document.querySelector('.video-button'),
    color: 'red',
    src: 'https://cms-bucket.ws.126.net/2021/0525/3012c74fp00qtniu0008tc000go006yc.png',
    callback: () => { 
        console.log('这是videoButton回调');
    }
})

new EnhanceUi.EnhanceButton({
    element: document.querySelector('.comment-button-arrow'),
    text: '打开网易新闻',
    color: 'red',
    type: 'comment',
    callback: () => { 
        console.log('这是EnhanceButton回调');
    }
})

new EnhanceUi.TextMoreButton({
    element: document.querySelector('.comment-button'),
    text: '打开"App"，查看更多评论',
    type: 'comment',
    color: 'red',
    callback: () => { 
        console.log('这是TextMoreButton回调');
    }
})

new EnhanceUi.Swiper({
    container:document.querySelector('.swiper'),
    mode: 'dark',
    type: 'comment',
    position: 'bottom',
    direction:'...',
    data: [{
        'img': 'https://img.36krcdn.com/20200828/v2_09cbece3aa684ad2a4f3a58daa4f6f10_img_000',
        'text': '111热门文章：父母最大的悲哀是年老后在子女面前变得小心翼翼',
        'url': 'www.baidu.com'
      },{
        'img': 'https://img.36krcdn.com/20200401/v2_eaf81d89a62d4cffbe62164ae29503b7_img_000?x-oss-process=image/resize,p_5/blur,r_3,s_2',
        'text': '2222热门跟贴：前年去西藏自驾，看到近边境延绵十几公里的野战军临时营房、装备和车辆，和俄罗斯方块一样整齐，委实震撼。反观印度，感觉就是草台班子唱戏。。',
        'url': 'www.baidu.com'
      },{
        'img': 'https://img.36krcdn.com/20200401/v2_6b4d69301bc943d6a70db63cf65d3f35_img_000?x-oss-process=image/resize,p_5/blur,r_3,s_2',
        'text': '3333热门文章：父母最大的悲哀是年老后在子女面前变得小心翼翼',
        'url': 'www.baidu.com'
        }],
        callback: (index) => { 
            console.log('这是swiper回调,index为'+index);
        }
})
    </script>
</body>

</html>